<template>
  <div class="ad_content5Edit">
    <div class="title_h1">
      {{ isEdit ? "编辑招聘详情信息" : "发布招聘信息" }}
    </div>
    <div class="ad_c5_body">
      <div class="hang_msg">
        <div class="left_title">标题 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.biaoti"
          placeholder="请输入标题"
          size="small"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">职位类型 :</div>
        <el-select
          size="mini"
          v-model="itemInfo.zhiwei"
          placeholder="请选择职位类型"
        >
          <el-option
            v-for="item in zhiweiList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <div class="hang_msg">
        <div class="left_title">工作地址 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.dizhi"
          placeholder="请输入标题"
          size="small"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">招聘人数 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.renshu"
          placeholder="请输入摘要"
          size="small"
          type="number"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">排序 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.sort"
          placeholder="请输入排序"
          size="small"
          type="number"
        ></el-input>
      </div>

      <div class="hang_msg">
        <div class="left_title">工作年限 :</div>
        <el-select
          size="mini"
          v-model="itemInfo.nianxian"
          placeholder="请选择工作年限"
        >
          <el-option
            v-for="(item,index) in nianxianList"
            :key="index"
            :label="item.title"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="hang_msg">
        <div class="left_title">薪资待遇 :</div>
        <el-select
          size="mini"
          v-model="itemInfo.xinchou"
          placeholder="请选择薪资待遇"
        >
          <el-option
            v-for="(item,index) in xinchouList"
            :key="index"
            :label="item.title"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="hang_msg">
        <div class="left_title">学历 :</div>
        <el-select
          size="mini"
          v-model="itemInfo.xueli"
          placeholder="请选择学历"
        >
          <el-option
            v-for="(item,index) in xueliList"
            :key="index"
            :label="item.title"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="hang_msg">
        <div class="left_title">是否显示 :</div>
        <el-switch
          v-model="itemInfo.isshow == 1 ? true : false"
          active-text="显示"
          inactive-text="不显示"
          @change="switchChange"
        >
        </el-switch>
      </div>
      <div class="hang_msg dantupian_up">
        <div class="left_title top_cc">文件 :</div>
        <el-upload
          :action="http + '/api/common/fileupload'"
          list-type="text"
          :on-preview="handlePictureCardPreviewCF"
          :on-remove="handleRemoveCF"
          :on-success="fileChangeCF"
          :file-list="fileListElCF"
          :limit="5"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传文件</div>
        </el-upload>
      </div>
      <div class="left_title_bgcc">职位描述</div>

      <WenbenCom @getContent="getContent" :rfuwenben="rfuwenben"></WenbenCom>
    </div>
    <el-button @click="subData" type="warning" class="sub_btn">提交</el-button>
  </div>
</template>

<script>
import { Message } from "element-ui";
import WenbenCom from "@components/wenbenCom";
import _ from "@/until/lodash";
export default {
  components: { WenbenCom },
  data() {
    return {
      vv: "",
      itemInfo: {
        biaoti:"",
        zhiwei: "",
        dizhi: "",
        renshu: "",
        sort: "",
        isshow: 1,
        nianxian: "",
        xinchou: "",
        xueli: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      isEdit: false,
      fuwenben: "",
      rfuwenben: "",
      dataList: [],
      id: "",
      fileList: [],
      disabled: false,
      fileListEl: [],
      fileListC: [],
      fileListElCF: [],
      fileListCF: [],
      http: "",
      zhiweiList: [],
      xinchouList: [],
      xueliList: [],
      nianxianList: [],
    };
  },
  beforeMount() {
    this.xinchouList = [
      { title: "不限", value: "" },
      { title: "面谈", value: "面谈" },
      { title: "2000元以下", value: "2000元以下" },
      { title: "2001到4000元", value: "2001到4000元" },
      { title: "4001到6000元", value: "4001到6000元" },
      { title: "6001到8000元", value: "6001到8000元" },
      { title: "8001到1万元", value: "8001到1万元" },
      { title: "1万到1.5万元", value: "1万到1.5万元" },
      { title: "1.5万元以上", value: "1.5万元以上" }
    ];
    this.nianxianList = [
      { title: "不限", value: "" },
      { title: "1年以下", value: "1年以下" },
      { title: "1-3年", value: "1-3年" },
      { title: "3-5年", value: "3-5年" },
      { title: "5-10年", value: "5-10年" },
      { title: "10年以上", value: "10年以上" }
    ]
    this.xueliList = [
      { title: "不限", value: "" },
      { title: "初中及以下", value: "初中及以下" },
      { title: "高中", value: "高中" },
      { title: "中专", value: "中专" },
      { title: "大专", value: "大专" },
      { title: "本科", value: "本科" },
      { title: "硕士", value: "硕士" },
      { title: "博士", value: "博士" }
    ]
    this.$getApi("/common/Invitetype", {}).then((res) => {
      console.log(res, "职位");
      this.zhiweiList = res.data;
    });
  },
  mounted() {
    this.http = this.$apiUrl;
    console.log("1212");
    if (this.$route.query.info) {
      this.isEdit = true;
      this.id = this.$route.query.info;
      // this.itemInfo = JSON.parse(this.$route.query.info);
      this.$getApi("/common/Invitelist", { id: this.id }).then((res) => {
        console.log(res.data[0]);
      this.itemInfoC = res.data[0];
      this.itemInfo.biaoti = this.itemInfoC.title;
      this.itemInfo.zhiwei = this.itemInfoC.zhiweitype;
      this.itemInfo.xinchou = this.itemInfoC.xinzidaiyun;
      this.itemInfo.renshu = Number(this.itemInfoC.zhaopinrenshu);
      this.itemInfo.xueli = this.itemInfoC.xueli;
      this.itemInfo.nianxian = this.itemInfoC.gongzuonx;
      this.itemInfo.dizhi = this.itemInfoC.gongzuoaddress;
      this.itemInfo.sort = Number(this.itemInfoC.sort);
      this.itemInfo.isshow = this.itemInfoC.isshow;
      this.rfuwenben = this.itemInfoC.content;
      console.log(this.itemInfo,this.fuwenben)
        // this.fileList = [
        //   { name: "ddd.jpeg", url: this.http + res.data.thumbnail },
        // ];
        // let imgs = JSON.parse(res.data.images);
        // _.map(imgs, (itemImg) => {
        //   let name = itemImg.split("/");
        //   let nameLength = name.length;
        //   this.fileListEl.push({
        //     name: name[nameLength - 1],
        //     url: this.http + itemImg,
        //   });
        // });
        // this.fileListC = imgs;
        // console.log(this.fileListEl);
        // let files = JSON.parse(res.data.file);
        // _.map(files, (itemImg) => {
        //   let name = itemImg.split("/");
        //   let nameLength = name.length;
        //   this.fileListElCF.push({
        //     name: name[nameLength - 1],
        //     url: this.http + itemImg,
        //   });
        // });
        // this.fileListCF = files;
        // this.firstImg = res.data.thumbnail;
        // this.dialogImageUrl = res.data.thumbnail;
      });
    }
  },
  computed: {
    itemInfoIsShow() {
      return this.itemInfo.isshow == 1 ? true : false;
    },
  },
  methods: {
    fileChanges(el) {
      console.log(el[0].files);
    },
    switchChange(el) {
      console.log(el);
      if (el) {
        this.itemInfo.isshow = 1;
      } else {
        this.itemInfo.isshow = 0;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleRemoveC(file) {
      console.log(file);
      let indexC = _.findIndex(this.fileListEl, (item) => {
        return item.name == file.name;
      });
      console.log(indexC);
      this.fileListC.splice(indexC, 1);
      this.fileListEl.splice(indexC, 1);
      console.log(this.fileListC);
    },
    handleRemoveCF(file) {
      let indexC = _.findIndex(this.fileListElCF, (item) => {
        return item.name == file.name;
      });
      console.log(indexC);
      this.fileListCF.splice(indexC, 1);
      this.fileListElCF.splice(indexC, 1);
      console.log(this.fileListCF);
    },
    fileChange(response, file, fileList) {
      console.log(response, file, fileList);
      this.dialogImageUrl = response.data;
    },
    fileChangeC(response, file, fileList) {
      this.fileListC.push(response.data);
      this.fileListEl = fileList;
      console.log(response, file, fileList);
    },
    fileChangeCF(response, file, fileList) {
      this.fileListCF.push(response.data);
      this.fileListElCF = fileList;
      console.log(response, file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handlePictureCardPreviewC(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewCF(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownloadC(file) {
      console.log(file);
    },
    handleDownloadCF(file) {
      console.log(file);
    },
    subData() {
      console.log();

      let dataL = {
        title: this.itemInfo.biaoti,
        zhiweitype:this.itemInfo.zhiwei,
        xinzidaiyun:this.itemInfo.xinchou,
        zhaopinrenshu:this.itemInfo.renshu,
        xueli:this.itemInfo.xueli,
        gongzuonx:this.itemInfo.nianxian,
        gongzuoaddress:this.itemInfo.dizhi,
        xueli:this.itemInfo.xueli,
        sort: this.itemInfo.sort,
        isshow: this.itemInfo.isshow,
        // thumbnail: this.dialogImageUrl,
        content: this.fuwenben,
        // images: JSON.stringify(this.fileListC),
        file: JSON.stringify(this.fileListCF),
      };
      console.log(dataL)
      if (this.id) {
        dataL.id = Number(this.id);
        this.$postApi("/common/editInvite", dataL).then((res) => {
          console.log(res);
          Message({
            type: "success",
            message: "编辑成功",
            showClose: true,
          });
          this.$router.go(-1);
          // this.dataList = res.data;
        });
      } else {
        console.log(dataL);
        this.$postApi("/common/addInvite", dataL).then((res) => {
          console.log(res);
          Message({
            type: "success",
            message: "新增成功",
            showClose: true,
          });
          this.$router.go(-1);
          // this.dataList = res.data;
        });
      }
    },
    getContent(val) {
      console.log()
      this.fuwenben = val;
    },
  },
};
</script>
<style lang="stylus">
.dantupian_up {
  .el-upload-list--picture-card .el-upload-list__item {
    width: 160px;
    height: 110px;
  }

  .el-upload--picture-card {
    width: 160px;
    height: 110px;
  }

  .el-upload-list__item-actions {
    width: 160px;
    height: 110px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style scoped lang="stylus">
.picture-card {
}

.ad_content5Edit {
  background-color: #fff;
  padding-bottom: 30px;

  .left_title_bgcc {
    background-color: #85bcfa;
    color: #fff;
    text-align: center;
    padding: 6px 0;
    width: 100%;
    margin: 10px 0;
  }

  .hang_msg {
    display: flex;
    align-items: center;
    padding: 20px 0 10px 0;
    font-size: 16px;

    &.dantupian_up {
      align-items: flex-start;
    }

    .left_title {
      width: 160px;
      text-align: right;
      padding-right: 8px;
      color: #004173;

      &.top_cc {
        display: flex;
        justify-content: flex-end;
        vertical-align: top;
      }
    }

    .right_input {
      width: 460px;
    }
  }

  .sub_btn {
    display: block;
    width: 300px;
    margin: 30px auto 20px;
  }

  .title_h1 {
    // text-align center;
    color: #004173;
    font-size: 26px;
    padding: 20px 0 10px 60px;
    border-bottom: 1px solid #f0f0f0;
  }

  .ad_c5_body {
    padding: 10px;
  }
}
</style>
